<template>
  <div>
    <h2>3维图</h2>

    <common-echarts
      :option="option"
      ref="echarts"
      :height="height"
      :width="width"
    ></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "@/components/echarts/echarts.vue";
// api: https://github.com/ecomfe/echarts-gl
import "echarts-gl";

export default {
  name: "GlEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      var data = [
        [100, 50, 70],
        [40, 240, 60],
        [100, 30, 50],
        [200, 70, 40],
        [150, 30, 50],
      ];

      let series = [
        {
          name: "三维坐标",
          type: "scatter3D", //三维散点图
          data: data,
          symbolSize: 15, //点的大小
          itemStyle: {
            color: "#F00", //点的颜色
          },
        },
      ];

      return {
        title: {
          text: "scatter3D",
          subtext: "3D散点图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          //   formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: ["A商品", "B商品", "C商品", "D商品", "E商品"],
        // },
        series,
        xAxis3D: {
          name: "x",
          type: "value",
        },
        yAxis3D: {
          name: "y",
          type: "value",
        },
        zAxis3D: {
          name: "z",
          type: "value",
        },
        grid3D: {
          viewControl: {
            //用于鼠标的旋转，缩放等视角控制
            beta: 100, //视角绕y轴，即左右旋转的角度
          },
          boxWidth: 100,
          boxHeight: 100,
          boxDepth: 100,
          top: "middle", //组件的视图离容器上侧的距离
        },
      };
    },
  },
  data() {
    return {
      echarts: null,
      width: 600,
      height: 500,
    };
  },
  mounted() {},
  methods: {},
};
</script>
